<template>
  <svg
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="yindu-icon"
  >
    <path
      d="M15.8333 8.33357H16.6667C17.1269 8.33357 17.5 8.70665 17.5 9.1669V17.5002C17.5 17.9605 17.1269 18.3336 16.6667 18.3336H3.33333C2.8731 18.3336 2.5 17.9605 2.5 17.5002V9.1669C2.5 8.70665 2.8731 8.33357 3.33333 8.33357H4.16667V7.50023C4.16667 4.27858 6.77834 1.6669 10 1.6669C13.2217 1.6669 15.8333 4.27858 15.8333 7.50023V8.33357ZM4.16667 10.0002V16.6669H15.8333V10.0002H4.16667ZM9.16667 11.6669H10.8333V15.0002H9.16667V11.6669ZM14.1667 8.33357V7.50023C14.1667 5.19905 12.3012 3.33357 10 3.33357C7.69882 3.33357 5.83333 5.19905 5.83333 7.50023V8.33357H14.1667Z"
      fill="#3D88F2"
    />
  </svg>
</template>

<script setup lang="ts">
type Props = {
  fill?: string;
};

const props = withDefaults(defineProps<Props>(), {
  fill: "#323232",
});

const fillColor = computed(() => {
  return props.fill;
});
</script>
<style scoped lang="less">
.yindu-icon {
  #svg-fill {
    fill: v-bind(fillColor);
  }
}
</style>
